<template>
  <div class="container">
    <el-dialog :visible="isShow" title="题目预览" @open="detail" @close="close">
      <el-row style="height: 60px">
        <el-col :span="6">
          <el-tag type="info">【题型】: {{ data.questionType }}</el-tag>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">【编号】: {{ data.id }}</el-tag>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">【难度】: {{ data.difficulty }}</el-tag>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">【标签】: {{ data.tags }}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-tag type="info">【学科】: {{ data.subjectName }}</el-tag>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">【目录】: {{ data.directoryName }}</el-tag>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">【方向】: {{ data.direction }}</el-tag>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row style="height: 40px">
        <el-tag type="warning">【题干】: </el-tag>
      </el-row>
      <el-row v-html="data.answer"></el-row>
      <el-row>
        <el-tag>{{ data.questionType }} 选项：（以下选中的选项为正确答案）</el-tag>
      </el-row>
      <!-- 单选 -->
      <el-row v-if="data.questionType === '单选题'">
        <RadioGroup v-model="vertical" vertical>
          <Radio disabled :label="item.code" v-for="item in data.options" :key="item.id">
            <span>{{ item.code }}: </span>
            <span>{{ item.title }}</span>
          </Radio>
        </RadioGroup>
      </el-row>
      <!-- 多选 -->
      <el-row v-if="data.questionType === '多选题'">
        <CheckboxGroup v-model="itemArray">
          <Checkbox disabled :label="item.code" style="margin-bottom: 10px; width: 100%" v-for="item in data.options" :key="item.code">
            <span>{{ item.code }}: </span>
            <span>{{ item.title }}</span>
          </Checkbox>
        </CheckboxGroup>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-tag type="success" style="margin-right: 15px">【参考答案】: </el-tag>
        <el-button type="danger" @click="ShowVideo">视频答案预览</el-button>
        <el-row v-if="isShowVideo">
          <video :src="data.videoURL" width="320" height="240" controls></video>
        </el-row>
      </el-row>
      <el-divider></el-divider>
      <el-row type="flex" align="middle">
        <el-tag type="success" style="margin-right: 15px">【答案解析】: </el-tag>
        <span v-html="data.answer"></span>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-tag type="info">【题目备注】: {{ data.remarks }}</el-tag>
      </el-row>
      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-button type="primary" @click="close">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    isShow: {
      type: Boolean,
      required: true,
      default: false
    },
    questionsId: {
      type: Number,
      required: true,
      default: 1
    }
  },
  data () {
    return {
      data: {},
      vertical: '',
      isShowVideo: false,
      itemArray: []
    }
  },
  methods: {
    async detail () {
      // console.log(this.questionsId)
      const result = await detail({ id: this.questionsId })
      // console.log(result.data)
      if (result.data.questionType === '1') {
        result.data.questionType = '单选题'
        result.data.options.forEach(item => {
          if (item.isRight === 1) {
            console.log(item.code)
            this.vertical = item.code
          }
        })
      } else if (result.data.questionType === '2') {
        result.data.questionType = '多选题'
        result.data.options.forEach(item => {
          if (item.isRight === 1) {
            // console.log(item.code)
            this.itemArray.push(item.code)
          }
        })
      } else {
        result.data.questionType = '简答题'
      }
      if (result.data.difficulty === '1') {
        result.data.difficulty = '简单'
      } else if (result.data.difficulty === '2') {
        result.data.difficulty = '一般'
      } else {
        result.data.difficulty = '困难'
      }
      this.data = result.data
    },
    close () {
      this.isShowVideo = false
      this.$emit('update:isShow', false)
    },
    ShowVideo () {
      this.isShowVideo = true
    }
  }
}
</script>

<style scoped lang='less'></style>
